<template>
    <el-table :data="productsList" style="width: 100%" :row-class-name="tableRowClassName" >
        <el-table-column prop="id" label="序号" width="100" />
        <el-table-column prop="brand" label="品牌" width="150"  />
        <el-table-column prop="price" label="价格" width="100"   />
        <el-table-column prop="stock" label="库存" width="100"   />
        <el-table-column prop="production_date" label="生产日期" width="150" />
        <el-table-column prop="tags" label="分类" width="200" />
        <el-table-column label="操作" >
            <template #default="scope">
                <el-button size="small" type="success" >详情</el-button>
                <el-button size="small" type="primary" >修改</el-button>
                
                <!-- <el-button type="primary" :icon="Edit" circle size="small" > -->
                <el-button size="small" type="danger" >Delete</el-button>
                <!-- <el-button type="danger" :icon="Delete" circle /> -->
            </template>

        </el-table-column>
    </el-table>
</template>


<script setup>
import { getProducts } from "@/api/products.js"
import { ref } from "vue"

const productsList = ref([]);

fn()
async function fn() {
    let result = await getProducts;
    console.log(result);
    result.data.data.forEach(element => {
        element.tags.join("|")
    });
    console.log(result.data.data);
    productsList.value = result.data.data
}

/* const tableRowClassName = ({
  row,
  rowIndex,
}) => {
  if (rowIndex === 1) {
    return 'warning-row'
  } else if (rowIndex === 3) {
    return 'success-row'
  }
  return ''
} */
</script>